<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐上传</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#7B61FF',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'custom': '0 10px 25px -5px rgba(22, 93, 255, 0.1), 0 8px 10px -6px rgba(22, 93, 255, 0.1)',
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .backdrop-blur {
                backdrop-filter: blur(8px);
            }
            .bg-upload-pattern {
                background-image: url("https://picsum.photos/id/1048/1920/1080");
                background-size: cover;
                background-attachment: fixed;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .file-drop-active {
                border-color: #165DFF;
                background-color: rgba(22, 93, 255, 0.1);
            }
        }
    </style>
</head>

<body class="font-inter bg-light min-h-screen bg-upload-pattern">
    <!-- 半透明背景遮罩 -->
    <div class="fixed inset-0 bg-dark/60 backdrop-blur z-0"></div>
    
    <div class="container mx-auto px-4 py-12 relative z-10 flex flex-col items-center justify-center min-h-screen">
        <!-- 返回按钮 -->
        <div class="w-full max-w-2xl mb-8">
            <a href="list.html" class="inline-flex items-center text-white hover:text-primary transition-custom">
                <i class="fa fa-arrow-left mr-2"></i> 返回音乐列表
            </a>
        </div>
        
        <!-- 上传表单卡片 -->
        <div class="w-full max-w-2xl bg-white/10 backdrop-blur rounded-2xl shadow-custom overflow-hidden transform transition-all duration-300 hover:shadow-lg">
            <!-- 卡片头部 -->
            <div class="bg-primary/20 p-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-white text-shadow">
                    <i class="fa fa-cloud-upload text-primary mr-3"></i>音乐上传
                </h2>
                <p class="text-white/70 mt-2">上传您喜爱的MP3音乐与他人分享</p>
            </div>
            
            <!-- 表单内容 -->
            <form method="POST" enctype="multipart/form-data" action="/music/upload" class="p-8 space-y-6">
                <!-- 文件上传区域 -->
                <div class="space-y-4">
                    <label class="block text-sm font-medium text-white">选择MP3音乐文件</label>
                    <div id="file-drop-area" class="relative border-2 border-dashed border-white/30 rounded-xl p-8 text-center transition-custom cursor-pointer hover:border-primary/50">
                        <input type="file" name="filename" id="file-input" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept=".mp3">
                        <div class="space-y-3">
                            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/20 mb-2">
                                <i class="fa fa-music text-2xl text-primary"></i>
                            </div>
                            <p class="text-white/80">点击或拖拽MP3文件到此处上传</p>
                            <p class="text-xs text-white/60">仅支持MP3格式</p>
                        </div>
                        <div id="selected-file" class="hidden mt-4 p-3 bg-white/10 rounded-lg">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fa fa-file-audio text-primary mr-2"></i>
                                    <span id="file-name" class="text-white truncate"></span>
                                </div>
                                <button type="button" id="remove-file" class="text-white/60 hover:text-red-400 transition-custom">
                                    <i class="fa fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 歌手名输入 -->
                <div class="space-y-4">
                    <label for="singer" class="block text-sm font-medium text-white">歌手名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                            <i class="fa fa-user text-gray-400"></i>
                        </span>
                        <input 
                            type="text" 
                            name="singer" 
                            id="singer" 
                            placeholder="请输入歌手名" 
                            class="w-full pl-10 pr-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-custom"
                        >
                    </div>
                </div>
                
                <!-- 歌曲名输入 -->
                <div class="space-y-4">
                    <label for="title" class="block text-sm font-medium text-white">歌曲名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                            <i class="fa fa-music text-gray-400"></i>
                        </span>
                        <input 
                            type="text" 
                            name="title" 
                            id="title" 
                            placeholder="请输入歌曲名" 
                            class="w-full pl-10 pr-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-custom"
                        >
                    </div>
                </div>
                
                <!-- 上传按钮 -->
                <div class="pt-4">
                    <button 
                        type="submit" 
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition-custom flex items-center justify-center"
                    >
                        <i class="fa fa-cloud-upload mr-2"></i> 开始上传
                    </button>
                </div>
            </form>
        </div>
        
        <!-- 页脚 -->
        <footer class="mt-12 text-center text-white/60 text-sm">
            <p>© 2025 在线音乐服务器 | 上传的音乐仅限个人学习交流使用</p>
        </footer>
    </div>
    
    <!-- 提示消息容器 -->
    <div id="toast-container" class="fixed top-4 right-4 z-50"></div>

    <script>
        // 文件上传区域交互
        const fileDropArea = document.getElementById('file-drop-area');
        const fileInput = document.getElementById('file-input');
        const selectedFile = document.getElementById('selected-file');
        const fileName = document.getElementById('file-name');
        const removeFile = document.getElementById('remove-file');
        
        // 拖放事件
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            fileDropArea.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        ['dragenter', 'dragover'].forEach(eventName => {
            fileDropArea.addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            fileDropArea.addEventListener(eventName, unhighlight, false);
        });
        
        function highlight() {
            fileDropArea.classList.add('file-drop-active');
        }
        
        function unhighlight() {
            fileDropArea.classList.remove('file-drop-active');
        }
        
        // 处理文件拖放
        fileDropArea.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            
            if (files.length > 0) {
                handleFiles(files[0]);
            }
        }
        
        // 处理文件选择
        fileInput.addEventListener('change', function() {
            if (this.files.length > 0) {
                handleFiles(this.files[0]);
            }
        });
        
        // 处理选中的文件
        function handleFiles(file) {
            // 检查文件类型是否为MP3
            const fileExtension = file.name.split('.').pop().toLowerCase();
            if (fileExtension !== 'mp3') {
                showToast('请选择MP3格式的音乐文件！', 'error');
                return;
            }
            
            fileName.textContent = file.name;
            selectedFile.classList.remove('hidden');
            fileDropArea.classList.add('file-drop-active');
            
            // 自动填充歌曲名（去除文件扩展名）
            const titleInput = document.getElementById('title');
            if (!titleInput.value) {
                const nameWithoutExt = file.name.replace(/\.mp3$/i, '');
                titleInput.value = nameWithoutExt;
            }
        }
        
        // 移除选中的文件
        removeFile.addEventListener('click', function() {
            fileInput.value = '';
            selectedFile.classList.add('hidden');
            fileDropArea.classList.remove('file-drop-active');
        });
        
        // 显示提示消息
        function showToast(message, type = 'info') {
            const toastContainer = document.getElementById('toast-container');
            
            // 创建toast元素
            const toast = document.createElement('div');
            toast.className = `flex items-center p-4 mb-4 text-sm rounded-lg shadow-lg transform transition-all duration-300 translate-y-[-20px] opacity-0 max-w-xs`;
            
            // 根据类型设置样式
            if (type === 'success') {
                toast.classList.add('bg-green-500', 'text-white');
                toast.innerHTML = `<i class="fa fa-check-circle mr-2"></i>${message}`;
            } else if (type === 'error') {
                toast.classList.add('bg-red-500', 'text-white');
                toast.innerHTML = `<i class="fa fa-exclamation-circle mr-2"></i>${message}`;
            } else {
                toast.classList.add('bg-primary', 'text-white');
                toast.innerHTML = `<i class="fa fa-info-circle mr-2"></i>${message}`;
            }
            
            // 添加到容器
            toastContainer.appendChild(toast);
            
            // 触发动画
            setTimeout(() => {
                toast.classList.remove('translate-y-[-20px]', 'opacity-0');
            }, 10);
            
            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.add('translate-y-[-20px]', 'opacity-0');
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 3000);
        }
        
        // 表单提交处理
        document.querySelector('form').addEventListener('submit', function(e) {
            // 简单验证
            if (!fileInput.value) {
                e.preventDefault();
                showToast('请选择要上传的MP3音乐文件！', 'error');
                return;
            }
            
            // 再次检查文件类型
            const fileExtension = fileInput.files[0].name.split('.').pop().toLowerCase();
            if (fileExtension !== 'mp3') {
                e.preventDefault();
                showToast('请选择有效的MP3格式音乐文件！', 'error');
                return;
            }
            
            if (!document.getElementById('singer').value) {
                e.preventDefault();
                showToast('请输入歌手名！', 'error');
                return;
            }
            
            if (!document.getElementById('title').value) {
                e.preventDefault();
                showToast('请输入歌曲名！', 'error');
                return;
            }
            
            // 显示上传中提示
            showToast('正在上传音乐，请稍候...');
        });
    </script>
</body>
</html>